<template>
  <view class="container">

    <view class="title">
      修改资料
    </view>
    <view class="menu">
      <view @click="chooseAndUploadImage" class="menu-item">
        <view class="menu-item-left">
          <!--              <view class="menu-icon">-->

          <!--              </view>-->
          <view class="menu-text">
            头像
          </view>

          <!--          <u-icon name="star"-->
          <!--                  label="我的收藏"-->
          <!--                  label-color="black"-->
          <!--                  labelPos="right"-->
          <!--                  color="rgb(170,170,170)"-->
          <!--                  size="30"></u-icon>-->
        </view>
        <view class="menu-item-right">
          <view class="menu-item-right-content">
            <u-avatar :src="avatarSrc"></u-avatar>

            <u-icon name="arrow-right"
                    color="rgb(170,170,170)"
                    size="20"></u-icon>
          </view>
        </view>
      </view>

      <view @click="goPage('/subpages/updatenickname/updatenickname')" class="menu-item">
        <view class="menu-item-left">
          <!--                        <view class="menu-icon">-->

          <!--                        </view>-->
          <view class="menu-text">
            昵称
          </view>

          <!--          <u-icon name="lock"-->
          <!--                  label="隐私政策"-->
          <!--                  label-color="black"-->
          <!--                  labelPos="right"-->
          <!--                  color="rgb(170,170,170)"-->
          <!--                  size="30"></u-icon>-->
        </view>
        <view class="menu-item-right">
          <view class="menu-item-right-content">
            <text>{{ userInfo.nickName }}</text>

            <u-icon name="arrow-right"
                    color="rgb(170,170,170)"
                    size="20"></u-icon>
          </view>
        </view>
      </view>

      <!--      <view class="menu-item">
              <view class="menu-item-left">
                &lt;!&ndash;              <view class="menu-icon">&ndash;&gt;

                &lt;!&ndash;              </view>&ndash;&gt;
                &lt;!&ndash;              <view class="menu-text">&ndash;&gt;
                &lt;!&ndash;                客服热线&ndash;&gt;
                &lt;!&ndash;              </view>&ndash;&gt;

                <u-icon name="kefu-ermai"
                        label="客服热线"
                        label-color="black"
                        labelPos="right"
                        color="rgb(170,170,170)"
                        size="30"></u-icon>
              </view>
              <view class="menu-item-right">
                <view class="menu-item-right-content">
                  1000000
                </view>
              </view>
            </view>

            <view class="menu-item">
              <view class="menu-item-left">
                &lt;!&ndash;              <view class="menu-icon">&ndash;&gt;

                &lt;!&ndash;              </view>&ndash;&gt;
                &lt;!&ndash;              <view class="menu-text">&ndash;&gt;
                &lt;!&ndash;                当前版本&ndash;&gt;
                &lt;!&ndash;              </view>&ndash;&gt;

                <u-icon name="info-circle"
                        label="当前版本"
                        label-color="black"
                        labelPos="right"
                        color="rgb(170,170,170)"
                        size="30"></u-icon>
              </view>
              <view class="menu-item-right">
                <view class="menu-item-right-content">
                  1.0
                </view>
              </view>
            </view>-->
    </view>

    <!--    <u-popup :show="show" mode="bottom" @close="close" @open="open">
          <view class="call-panel">
            <view @click="chooseAndUploadImage" class="call-panel-phone">
              拍照上传
            </view>
            <view class="call-panel-line-small"></view>
            <view @click="" class="call-panel-phone">
              从相册选取
            </view>
            <view class="call-panel-line"></view>
            <view @click="show=false;" class="call-panel-close">
              <text>取消</text>
            </view>

          </view>
        </u-popup>-->
  </view>
</template>

<script>
import {updateUserInfo} from "@/config/api";
import {checkLogin, getLoginUserInfo, tokenExpShowModal} from "@/config/util/common";

export default {
  data() {
    return {
      // show: false,

    };
  },
  onLoad() {

  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo ? this.$store.state.userInfo
          : {
            avatar: "",
            nickName: "",
            phonenumber: "",
          }
    },
    avatarSrc() {
      return this.userInfo.avatar ?
          `${this.$baseFileUrl}${this.userInfo.avatar}` :
          '/static/default-avatar.png'
    }
  },
  methods: {
    chooseAndUploadImage() {
      // 选择图片
      uni.chooseImage({
        count: 1, // 默认9，设置图片的数量
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: (chooseImageRes) => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          const uploadTask = uni.uploadFile({
            url: this.$baseFileUrl + '/common/upload', // 开发者服务器的URL
            filePath: tempFilePaths[0],
            name: 'file', // 必填，文件对应的 key
            header: {
              Authorization: "Bearer "+ uni.getStorageSync('token')
            },
            // formData: {
            //   'user': 'test' // 其他要上传的参数
            // },
            success: (uploadFileRes) => {
              console.log('upload success:', uploadFileRes);

              let realData = JSON.parse(uploadFileRes.data);
              if(realData.code === 401){
                //401 无权访问的处理
                tokenExpShowModal(false)
                return;
              }
              if (realData.code !== 200) {
                //其他错误的处理

                  uni.$u.toast(realData.msg)
                  return;
              }


              //已上传的处理
              if (!checkLogin(true)) {
                return;
              }
              //修改上传的用户头像
              updateUserInfo({
                userId: this.userInfo.userId,
                nickName: null,
                avatar: realData.fileName,
              }).then(res => {
                uni.$u.toast("修改成功")
                //刷新全局登录的用户
                getLoginUserInfo()
              })

            },
            fail: (uploadFileErr) => {
              console.error('upload fail:', uploadFileErr);
            }
          });
          // 监听上传进度变化
          uploadTask.onProgressUpdate((res) => {
            console.log('上传进度' + res.progress + '%');
          });
        },
        fail: (chooseImageErr) => {
          console.error('choose image fail:', chooseImageErr);
        }
      });
    },

    open() {
      console.log('open');
    },
    close() {
      this.show = false
      console.log('close');
    },
    //去到其他页面
    goPage(path) {

      uni.navigateTo({
        url: path
      })
    }
  }
}
</script>

<style lang="scss">

.container {
  justify-content: unset;
  flex-direction: column;
  align-items: unset;

  .title {
    padding-top: 50rpx;
    padding-left: 50rpx;
    padding-right: 50rpx;
    font-size: 18px;
  }

  .menu {
    background-color: $sys-color-white;

    .menu-item {

      display: flex;
      justify-content: space-between;
      padding-left: $sys-padding-50;
      padding-right: $sys-padding-50;
      padding-top: $sys-padding-30;
      padding-bottom: $sys-padding-30;
      border-bottom: 1px solid $sys-color-grey-170;
      align-items: center;

      .menu-item-right {
        color: $sys-color-grey-170;

        .menu-item-right-content {
          display: flex;
          flex-direction: row;
        }
      }

    }

  }

  .call-panel {
    font-size: 14px;
    text-align: center;

    .call-panel-phone {
      padding-top: $sys-padding-40;
      padding-bottom: $sys-padding-40;
    }

    .call-panel-line-small {
      height: 1px;
      background-color: rgba(121, 121, 121, 0.5);
    }

    .call-panel-line {
      height: 10rpx;
      background-color: rgba(121, 121, 121, 0.5);
    }

    .call-panel-close {
      padding-top: $sys-padding-40;
      padding-bottom: $sys-padding-40;
    }
  }
}
</style>
